<template>
    <div>
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="船代：">
                        {{ form.accountUnit }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算月度：">
                        {{ form.accountMonth }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="发生日期起：">
                        {{ form.startFeeTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发生日期止：">
                        {{ form.endFeeTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="卸船艘次：">
                        {{ form.unloadVoyNum }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="卸船理箱TEU：">
                        {{ form.unloadTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="装船艘次：">
                        {{ form.uploadVoyNum }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="装船理箱TEU：">
                        {{ form.uploadTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="装箱TEU：">
                        {{ form.zxTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="拆箱TEU：">
                        {{ form.cxTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="特殊理箱TEU：">
                        {{ form.specialTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="总理箱TEU：">
                        {{ form.totalTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>装卸船小计</h3>
        <el-table :data="load" :default-expand-all="false" border stripe max-height="500" class="mt-10">
            <el-table-column fixed="left" label="序号" width="55">
                <template slot-scope="scope">
                    <div v-if="scope.row.planType">{{ scope.$index+1 }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="portName" label="作业港口"  min-width="110"></el-table-column>
            <el-table-column prop="planType" label="计划类型"  min-width="110"></el-table-column>
            <el-table-column prop="voyNum" label="作业艘次"  min-width="110"></el-table-column>
            <el-table-column prop="totalTeu" label="总理箱量TEU"  min-width="140"></el-table-column>
            <el-table-column prop="containerTeu2" label="20'"  min-width="140"></el-table-column>
            <el-table-column prop="containerTeu4" label="40'"  min-width="140"></el-table-column>
            <el-table-column prop="accountWayCTeu" label="现结理箱TEU"  min-width="140"></el-table-column>
            <el-table-column prop="accountWayMTeu" label="月结理量TEU"  min-width="140">
                <template slot-scope="scope">
                    <div v-expand="scope.row.planType">{{ scope.row.accountWayMTeu }}</div>
                </template>
            </el-table-column>
            <el-table-column type="expand" label="展开" width="70">
                <template slot-scope="scope" v-expand="scope.row.planType">
                    <el-table :data="scope.row.detail" border stripe max-height="500">
                        <el-table-column prop="startFeeTime" label="发生日期"  min-width="110">
                            <template slot-scope="scope">
                                {{ scope.row.startFeeTime | filterDate }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="shipName" label="船名"  min-width="110"></el-table-column>
                        <el-table-column prop="voyage" label="航次"  min-width="110"></el-table-column>
                        <el-table-column prop="totalTeu" label="总理箱量TEU"  min-width="110"></el-table-column>
                        <el-table-column prop="containerTeu2" label="20'"  min-width="110"></el-table-column>
                        <el-table-column prop="containerTeu4" label="40'"  min-width="110"></el-table-column>
                        <el-table-column prop="accountWayCTeu" label="现结理箱TEU" 
                                         min-width="110"></el-table-column>
                        <el-table-column prop="accountWayMTeu" label="月结理量TEU" 
                                         min-width="110"></el-table-column>
                        <el-table-column label="操作"  min-width="110">
                            <template slot-scope="props">
                                <div @click="handleLoadDetail(props.row,scope.row)" style="color: blue;cursor: pointer">
                                    理箱明细
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
        </el-table>
        <load-form :form="form" ref="loadForm"></load-form>
        <h3 class="mt-20">理箱作业小计</h3>
        <el-table :data="special" border stripe max-height="500" class="mt-10">
            <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                    <div>{{ scope.$index+1 }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="planType" label="计划类型"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planType | _filterTsJobStatusNew }}
                </template>
            </el-table-column>
            <el-table-column prop="portName" label="作业港口"  min-width="110"></el-table-column>
            <el-table-column prop="monthTeu" label="本月箱量TEU"  min-width="140"></el-table-column>
            <el-table-column prop="remark" label="备注"  min-width="140"></el-table-column>
            <el-table-column label="操作"  min-width="110">
                <template slot-scope="props">
                    <div @click="handleSpecialDetail(props.row)" v-if="props.row.planType!='CHANGE'" style="color: blue;cursor: pointer">明细</div>
                    <div @click="handleAdjustDetail(props.row)" v-if="props.row.planType=='CHANGE'" style="color: blue;cursor: pointer">查看</div>
                </template>
            </el-table-column>
        </el-table>
        <special-form :form="form" ref="specialForm"></special-form>
        <adjust-detail ref="adjustDetail"></adjust-detail>
        <h3 class="mt-20">汇总统计</h3>
        <el-table :data="total" border stripe max-height="500" class="mt-10">
            <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                    <div v-if="scope.row.feeRuleName">{{ scope.$index+1 }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="portName" label="作业港口"  min-width="110"></el-table-column>
            <el-table-column prop="feeNum" label="计费数量"  min-width="140"></el-table-column>
            <el-table-column prop="feeUnit" label="单位"  min-width="140"></el-table-column>
            <el-table-column prop="feeRate" label="费率"  min-width="140"></el-table-column>
            <el-table-column prop="money" label="金额"  min-width="140"></el-table-column>
            <el-table-column prop="feeRuleName" label="费用标准名称"  min-width="140"></el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
            <el-row type="flex" justify="space-between" class="mt-20" style="width: 60%">
                <el-button @click="handlePrint('Total')">汇总账单打印</el-button>
                <el-button @click="handlePrint('Balance')">结算账单</el-button>
                <el-button @click="handlePrint('Detail')">明细打印</el-button>
                <el-button @click="handleDownload()">下载</el-button>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import {
        getBalanceDetail,
        getBalanceShipSubtotal,
        getBalanceSpecialList,
        getBalanceTotal,
        downloadFile
    } from "@/api/balance/balance";
    import loadForm from './loadForm'
    import specialForm from './specialForm'
    import adjustDetail from './adjustDetail'

    export default {
        name: "对账单查看",
        components: {
            loadForm, specialForm, adjustDetail
        },
        data() {
            return {
                id: '',
                form: {},
                load: [],
                special: [],
                total: [],
                created: true
            }
        },
        directives: {
            expand: {
                inserted(el, binding) {
                    if (!binding.value) {
                        el.parentNode.parentNode.nextElementSibling.firstChild.style.display = 'none'
                    }
                },
                update(el, binding) {
                    if (!binding.value) {
                        el.parentNode.parentNode.nextElementSibling.firstChild.style.display = 'none'
                    }
                },
            }
        },
        mounted() {
            this.getData()
        },
        activated() {
            if (!this.created) {
                this.getData()
            }
        },
        methods: {
            loadData() {
                getBalanceDetail(this.id).then(res => {
                    this.created = false
                    this.form = res.data
                })
                getBalanceShipSubtotal(this.id).then(res => {
                    this.load = res.data.date
                    if (this.load.length > 0) {
                        this.load.push({
                            portName: '本月合计箱量TEU',
                            accountWayMTeu: res.data.thisMonthTeu
                        })
                        this.load.push({
                            portName: '上月累计箱量TEU',
                            accountWayMTeu: res.data.lastMonthTeu
                        })
                        this.load.push({
                            portName: '本月累计箱量TEU',
                            accountWayMTeu: res.data.totalTeu
                        })
                    }
                })
                getBalanceSpecialList(this.id).then(res => {
                    this.special = res.data.aaData
                })
                getBalanceTotal(this.id).then(res => {
                    this.total = res.data.aaData
                    let count = 0
                    this.total.map(m => {
                        count = count + Number(m.money)
                    })
                    this.total.push({
                        portName: '合计',
                        money: count
                    })
                })
            },
            handleLoadDetail(item, m) {
                this.$refs.loadForm.dialogForm = true
                this.$refs.loadForm.createTime = m.createTime
                this.$refs.loadForm.loadData(this.id, item.planNo)

                // console.log(item)
            },
            handleSpecialDetail(item) {
                this.$refs.specialForm.dialogForm = true
                let params = item.dataId
                this.$refs.specialForm.loadData(params)
            },
            handleAdjustDetail(item) {
                this.$refs.adjustDetail.dialogForm = true
                let params = item.dataId[0].id
                this.$refs.adjustDetail.loadData(params)
            },
            handleDownload(){
                downloadFile(this.id).then(res => {
                    //这里res是返回的blob对象
                    var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = "账单总汇"; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
            getData() {
                this.id = sessionStorage.getItem('balanceDetailId')
                if (this.id) {
                    this.loadData()
                } else {
                    this.handleBack()
                }
            },
            handleBack() {
                const view = { path: `/work/balanceDetail`, name: '对账单查看' }
                this.$store.dispatch('delVisitedViews', view).then((views) => {
                    if (view.path === this.$route.path) {
                        const latestView = views.slice(-1)[0]
                        if (latestView) {
                            this.$router.push(latestView.path)
                        } else {
                            this.$router.push({ path: '/work/balance', name: '结算对账单' })
                        }
                    } else {
                        this.$message({ message: '服务器错误!', type: 'error' })
                    }
                })
            },
            handlePrint(router) {
                const origin = window.location.origin + window.location.pathname
                const route = `#/${router}/`
                window.open(`${origin}${route}${this.id}`);
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : ''
            }
        }
    }
</script>

<style scoped>

</style>
